<template>
  <div class="wrapper flex flex-column">
    <div class="top_content flex flex-column">
  		<!-- ="index,detail,searchResult" -->
  		<!-- <keep-alive exclude="editUserInfo">
  		  <router-view/>
  		</keep-alive> -->
  		<!-- <keep-alive include="index,member">
  		      <router-view></router-view>
  		</keep-alive> -->
  		<!-- <router-view/> -->
  		<keep-alive>
  		  <router-view v-if="this.$route.meta.keepAlive"></router-view>
  		</keep-alive>
  		<router-view v-if="!this.$route.meta.keepAlive"></router-view>
  	</div>
    <div class="bottom_tabbar" v-if="$route.meta.isShowTabbar==true">
  		<my-tabbar></my-tabbar>
  	</div>
  </div>
</template>

<script>
	import Tabbar from "./components/Tabbar.vue";
	
export default{
	components: {
	  myTabbar: Tabbar
	},
	created() {
		this.$router.beforeEach((to, from, next) => {
			localStorage.setItem('tab',to.path)
			this.bus.$emit('refreshTabbar',to.path)
			next();
		});
	},
  mounted() {
    const _this = this;
	this.bus.$emit('refreshTabbar')
	this.setUserAgent()
	console.log('V2')
  },
  methods: {
	//设置浏览器类型
	setUserAgent() {
		let user_agent = null
		const sUserAgent = window.navigator.userAgent.toLowerCase()
		// alert("sUserAgent:" + JSON.stringify(sUserAgent))
		// const bIsDtDreamApp = sUserAgent.indexOf('dtdreamweb') > -1 // 浙里办APP
		// const bIsAlipayMini =     sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1
		if (sUserAgent.indexOf('dtdreamweb') > -1) {
			user_agent = 'zwapp';// 浙政钉/浙里办APP
		} else if ( sUserAgent.indexOf('miniprogram') > -1 && sUserAgent.indexOf('alipay') > -1 ) {
			user_agent = 'alipay';// 支付宝
		}else if ( sUserAgent.match(/MicroMessenger/i) == 'micromessenger' ) {
			user_agent = 'wxapp';// 微信
		} else{
			user_agent = 'h5';
		}
		
		localStorage.setItem('user_agent', user_agent)
		return user_agent
	},
  }
}
</script>


<style lang="scss">
@import '@/assets/css/variable';
.wrapper{
    // background-color: $main-bgc;
    min-height: 100%;
	overflow: hidden;
	.top_content{
		flex: 1;
		z-index: 0;
		overflow: hidden;
		// overflow-y: scroll;
	}
	.bottom_tabbar{
		flex: 0 0 50px;
		height: 50px;
		z-index: 0;
		background-color: #017494;
	}
  }
html{
  font-size: 10px !important;
  min-height: 100%;
}
@media only screen and (max-width: 374px) {
    /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
    html {
        font-size: 10px !important;
    }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iphone6/7/8 和 iphone x */
    html {
        font-size: 11px !important;
    }
}
@media only screen and (min-width: 414px) {
    /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
    html {
        font-size: 12px !important;
    }
}
html{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	font-family: Helvetica, Arial !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
	overflow: hidden;
}
body{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
}

#app {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
.wrapper{
	// flex:1;
	// display: flex;
	// flex-direction: column;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	box-sizing: border-box;
	overflow: hidden;
}
.wrapperContent{
	// flex: 1;
	// width: 100%;
	// margin-bottom: 50px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 50px;
	// min-height: 100%;
	// flex: 1;
	// box-sizing: border-box;
	overflow-y: scroll;
}
.wrapperContent2{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0px;
	overflow-y: scroll;
}
* {
  box-sizing: border-box;
}
// 改变vant组件样式
.van-tabs__wrap{
	border-bottom: 1px solid #f4f4f4;
}

//其他样式
p{
  margin-bottom: 0 !important;
  span{
    img{
      max-width: 100% !important;
    }
  }
  img{
    max-width: 100% !important;
  }
}
.d-none{
  display: none;
}
.mar-center{
	margin: 0 auto;
	// margin-left: 50%;
	// transform: translateX(-50%);
	box-sizing: border-box;
}
.margin-all{
  margin: 0.8rem;
}
.margin-all-m{
  margin: 1.4rem;
}
.margin-all-l{
  margin: 1.7rem;
}
.padding-all{
  padding: 0.8rem;
}
.padding-all-m{
  padding: 1.4rem;
}
.padding-all-l{
  padding: 1.7rem;
}
.padding-lr{
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}
.padding-lr-m{
  padding-left: 1.2rem;
  padding-right: 1.2rem;
}
.padding-lr-l{
  padding-left: 1.6rem;
  padding-right: 1.6rem;
}
.pad-t-20{
	padding-top: 20px;
}
.pad-t-16{
	padding-top: 16px;
}
.pad-t-10{
	padding-top: 10px;
}
.pad-b-10{
	padding-bottom: 10px;
}
.pad-b-30{
	padding-bottom: 30px;
}
.border-r-l{
  border-radius: 0.8rem;
}
.border-r-m{
  border-radius: 0.6rem;
}
.border-radius-l{
  border-radius: 1rem;
}
.border-radius-m{
  border-radius: 0.6rem;
}
.border-radius-s{
  border-radius: 0.4rem;
}
.red{color:red;}
.gray{color: #999999;}
.blue{color: #2487EA;}
.orange{color: #DB311E;}
.green{color: #20BD68;}
.color-white{color:#ffffff}
.color-adorn{color:#ff5500}
.color-orange{color:#ffaa00}
.color-yellow{color:#ffff00}
.color-blue{color: #2487EA;}
.color-red{color: #DB311E;}
.color-green{color: #20BD68;}
.color-ll{color: $color1;}
.color-l{color: $color2;}
.color-m{color: $color3;}
.color-s{color: $color4;}
.margT18{margin-top:18px;}
.margT16{margin-top:16px;}
.margT12{margin-top:12px;}
.margT10{margin-top:10px;}
.margT6{margin-top:6px;}
.margT-s{margin-top:0.3rem;}
.margT-m{margin-top:0.4rem;}
.margT-l{margin-top:1rem;}
.margL10{margin-left:10px;}
.margL6{margin-left:6px;}
.margL-s{margin-left:0.3rem;}
.margL-m{margin-left:0.6rem;}
.margL-l{margin-left:1rem;}
.margR-s{margin-right:0.3rem;}
.margR-m{margin-right:0.6rem;}
.margR-l{margin-right:1rem;}
.margB-l{margin-bottom:1rem;}

.letter-s-1{
	letter-spacing: 1px;
}
.letter-s-2{
	letter-spacing: 2px;
}


.text-mini{
	transform: scale(0.8,0.8);
}
.text-mini-m{
	transform: scale(0.9,0.9);
}
	.fc-f4f4f4{
		color: #f4f4f4 !important;
	}
	.fc-000 {
	  color: #000 !important;
	}
	
	.fc-222 {
	  color: #222 !important;
	}
	
	.fc-333 {
	  color: #333 !important;
	}
	
	.fc-555 {
	  color: #555 !important;
	}
	
	.fc-666 {
	  color: #666 !important;
	}
	
	.fc-777 {
	  color: #777 !important;
	}
	.fc-888 {
	  color: #888888 !important;
	}
	
	.fc-999 {
	  color: #999 !important;
	}
	.fc-ccc {
	  color: #ccc !important;
	}
	
	.fc-desc {
	  color: #b4b4b4 !important;
	}
	
	.fc-c7c7c7 {
	  color: #c7c7c7 !important;
	}
	
	.fc-fff {
	  color: #fff;
	}
	.fc-base {
	  color: #3B97FF !important;
	}
	
	.fc-green {
	  color: #00aa00;
	}
	
	.fc-red {
	  color: #ff0000;
	}
	
	.fc-yellow {
	  color: #f2af3c;
	}
	
	.fc-orange {
	  color: #FC6C45;
	}
	.fc-price {
	  color: #ff5500 !important;
	}
	.fc-white {
	  color: #ffffff !important;
	}
	
	
	.mar-t-2{
	   margin-top: 2px !important;
	}
	.mar-t-3 {
	  margin-top: 3px;
	}
	
	.mar-t-5 {
	  margin-top: 5px;
	}
	.mar-t-7 {
	  margin-top: 7px;
	}
	
	.mar-t-8 {
	  margin-top: 8px;
	}
	
	.mar-t-10 {
	  margin-top: 10px;
	}
	
	.mar-t-12 {
	  margin-top: 12px !important;
	}
	.mar-t-13 {
	  margin-top: 26rpx !important;
	}
	.mar-t-15 {
	  margin-top: 15px !important;
	}
	.mar-t-16 {
	  margin-top: 16px !important;
	}
	.mar-t-17 {
	  margin-top: 34rpx !important;
	}
	.mar-t-18 {
	  margin-top: 36rpx !important;
	}
	
	.mar-t-20 {
	  margin-top: 20px !important;
	}
	.mar-t-23 {
	  margin-top: 46rpx !important;
	}
	.mar-t-25 {
	  margin-top: 50rpx !important;
	}
	
	.mar-t-30 {
	  margin-top: 30px !important;
	}
	.mar-t-35 {
	  margin-top: 70rpx !important;
	}
	.mar-t-40 {
	  margin-top: 80rpx !important;
	}
	.mar-t-50 {
	  margin-top: 100rpx !important;
	}
	.mar-t-70 {
	  margin-top: 140rpx !important;
	}
	.mar-l-3{
	  margin-left: 3px;
	}
	.mar-l-5 {
	  margin-left: 0.5rem !important;
	}
	.mar-l-6 {
	  margin-left: 6px !important;
	}
	.mar-l-7 {
	  margin-left: 0.7rem !important;
	}
	.mar-l-8 {
	  margin-left: 0.8rem !important;
	}
	.mar-l-10 {
	  margin-left: 1.0rem !important;
	}
	
	.mar-l-12 {
	  margin-left: 24rpx;
	}
	
	.mar-l-15 {
	  margin-left: 30rpx !important;
	}
	
	.mar-l-20 {
	  margin-left: 20px !important;
	}
	.mar-l-25 {
	  margin-left: 25px !important;
	}
	.mar-l-30 {
	  margin-left: 30px !important;
	}
	.mar-l-40 {
	  margin-left: 80rpx !important;
	}
	.mar-r-0 {
	  margin-right: 0rpx!important;
	}
	.mar-r-3 {
	  margin-right: 3px;
	}
	.mar-r-8 {
	  margin-right: 16rpx;
	}
	.mar-r-5 {
	  margin-right: 10rpx;
	}
	
	.mar-r-10 {
	  margin-right: 10px;
	}
	
	.mar-r-15 {
	  margin-right: 30rpx;
	}
	
	.mar-r-20 {
	  margin-right: 40rpx !important;
	}
	.mar-r-25 {
	  margin-right: 50rpx !important;
	}
	.mar-r-30 {
	  margin-right: 60rpx !important;
	}
	.mar-r-35 {
	  margin-right: 70rpx !important;
	}
	.mar-r-40 {
	  margin-right: 80rpx !important;
	}
	.mar-r-50 {
	  margin-right: 100rpx !important;
	}
	.mar-r-60 {
	  margin-right: 120rpx !important;
	}
	
	.mar-lr-3{
		margin-left: 6rpx !important;
		margin-right: 6rpx !important;
	}
	
	.mar-b-5 {
	  margin-bottom: 10rpx !important;
	}
	
	.mar-b-10 {
	  margin-bottom: 20rpx !important;
	}
	.mar-b-12 {
	  margin-bottom: 24rpx !important;
	}
	.mar-b-15 {
	    margin-bottom: 30rpx !important;
	  }
	.mar-b-16 {
	  margin-bottom: 32rpx !important;
	}
	.mar-b-20 {
	  margin-bottom: 40rpx !important;
	}
	.mar-b-25 {
	  margin-bottom: 50rpx !important;
	}
	.mar-b-30 {
	  margin-bottom: 60rpx !important;
	}
	.mar-b-35 {
	  margin-bottom: 70rpx !important;
	}
	.mar-b-40 {
	  margin-bottom: 80rpx !important;
	}
	.mar-b-45 {
	  margin-bottom: 90rpx !important;
	}
	.mar-b-50 {
	  margin-bottom: 100rpx !important;
	}
	.mar-b-60 {
	  margin-bottom: 120rpx !important;
	}
	.mar-b-70 {
	  margin-bottom: 140rpx !important;
	}
	.box-b{
	  box-sizing: border-box;
	}
	.index-pad-lr{
		padding-left: 14px;
		padding-right: 14px;
	}
	.index-mar-lr{
		margin-left: 14px;
		margin-right: 14px;
	}
	.pad-l-10{padding-left: 10px !important;}
	.pad-r-10{padding-right: 10px !important;}

.w-49 {
  width: 49.999999%;
}
.over-hid {
  overflow: hidden;
}
.flex{
  display: flex;
}
.flex-wrap{
	flex-wrap: wrap;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.flex-row{
	flex-direction: row;
}
.flex-column{
	flex-direction: column;
}
.align-top{
  vertical-align:top;
}
.align-start{
  align-items: flex-start; /*元素位于容器的开头。*/
}
.align-end{
  align-items: flex-end; /*元素位于容器底部*/
}
.align-center{
   align-items: center; /*垂直居中*/
}

.justify-around{
  justify-content: space-around;
}
.justify-between{
  justify-content: space-between;
}
.justify-center {
	justify-content: center;
}
.justify-start {
	justify-content: flex-start;
}
.justify-end {
	justify-content: flex-end;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.w-100 {
  width: 100%!important;
}
.h-100 {
  height: 100%;
}
.text-underline{
  text-decoration: underline;
}
.text-justify{
	text-align: justify;
}
.titleMoreBox {
	padding: 2rem 1.8rem 0 1.8rem;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.title {
		font-size: 1.6rem;
		font-weight: bold;
	}

	.more {
		display: flex;
		align-items: center;
		color: #999999;
	}
}
.t-center{
  text-align: center;
}
.t-bold{
  font-weight: bold;
}
.f-left{
	float: left;
}
.f-right{
	float: right;
}
.tabbar-height{
  height: 50px;
  width: 100%;
  background-color: $main-bgc-gray;
}
.tabbar-height-white{
  height: 50px;
  width: 100%;
  background-color: $main-bgc-white;
}
.line-height-m{
  line-height: 1.3em;
}
.line-height-l{
  line-height: 1.5em;
}
.gap-line{
	width: 100%;
	height: 2rem;
}
.splitLine{
	width: 100%;
	height: 1em;
	background-color: $main-bgc;
}
.main-bg-gray{
  background-color: $main-bgc;
}
.main-bg-white{
  background-color: $main-bgc-white;
}
.main-bg{
  background-color: $main-bgc;
}
.bac-color-normal{
  background-color: #0092FF !important;
}
.bac-color-price {
  background-color: #F83F20;
}

.bac-color-red {
  background-color: #F10505;
}

.bac-color-cccccc {
  background-color: #cccccc;
}


.bac-color-fff {
  background-color: #fff;
}

.bac-color-fa {
  background-color: #fafafa;
}

.bac-color-f4 {
  background-color: #f4f4f4;
}

.bac-color-yellow {
  background-color: #F3B13A;
}

.bac-color-ccc {
  background-color: #ccc;
}

.bac-color-888 {
  background-color: #888888 !important;
}

.title-l{
  font-size: 1.8rem;
  font-weight: bold;
  color: #111;
}
.title-m{
  font-size: 1.6rem;
  font-weight: bold;
  color: #222;
}
.title-s{
  font-size: 1.4rem;
  font-weight: bold;
  color: #333;
}
.t-indent{text-indent: 2em;}
.fs-10{ font-size: 1rem; }
.fs-12{ font-size: 1.2rem !important; }
.fs-13{ font-size: 1.3rem !important; }
.fs-14{ font-size: 1.4rem !important; }
.fs-15{ font-size: 1.5rem !important;}
.fs-16{ font-size: 1.6rem; }
.fs-18{ font-size: 1.8rem; }
.line-h-l{
	line-height: 1.5em;
}
.line-h-m{
	line-height: 1.4em;
}
.line-h-s{
	line-height: 1.3em;
}
  /* 文字溢出隐藏并显示省略号 */
  .ellipsis-line1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 1;/* 设置行数 */
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .ellipsis-line2{
  	overflow: hidden;
  	text-overflow: ellipsis;
  	display: -webkit-box;
	line-clamp: 2;/* 设置行数 */
  	-webkit-line-clamp:2;
  	-webkit-box-orient:vertical;
  }
  .ellipsis-line4{
  	overflow: hidden;
  	text-overflow: ellipsis;
  	display: -webkit-box;
  	line-clamp: 4;/* 设置行数 */
  	-webkit-line-clamp:4;
  	-webkit-box-orient:vertical;
  }
  .maskModel{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba($color: #000000, $alpha: 0.2);
  }
  .van-field__label{
    width:70px;
    margin-right: 6px;
  }
  .van-uploader__preview {
    margin: 0 3px 3px 0;
  }
  .titleLabel{
	  font-size: 16px;
	font-weight: bold;
  	padding-left: 20px;padding-top: 20px;padding-bottom: 12px;
  	position: relative;
  	&:after{
  		content: '';
  		position: absolute;
  		left: 10px;
  		width: 5px;
  		height: 14px;
  		background-color: #2487EA;
  	}
  }
  .fixed_bottom{
	  position: fixed;
	  bottom: 20px;
	  text-align: center;
	  letter-spacing: 1px;
	  width: 100%;
	  padding-left: 15%;
	  padding-right: 15%;
  }
  
  .sendCodeBtn{
  	min-width: 90px !important;
  }
  
  .tabList{
  	// margin-top: 2rem;
  	padding-bottom: 1rem;
  	border-bottom: 1px solid;
  	border-bottom-color: rgba($color: #0F91BE, $alpha: 0.6);
  	overflow-x: scroll;
  	.tabItem{
  		position: relative;
  		.selectedLine{
  			position: absolute;
  			bottom: -1rem;
  			width: 30px;
  			height: 4px;
  			background-color: #FFFFFF;
  			border-radius: 2px;
  		}
  	}
  }
  /*
   *  STYLE 11
   */
  
  #style-11::-webkit-scrollbar-track
  {
  	-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
  	background-color: #F5F5F5;
  	border-radius: 10px;
  }
  
  #style-11::-webkit-scrollbar
  {
  	width: 10px;
  	background-color: #F5F5F5;
  }
  
  #style-11::-webkit-scrollbar-thumb
  {
  	background-color: #cecece;
  	border-radius: 10px;
  }
  .collapse{
  	.collapse-item{
  		.collapse-item-title{
  			height: 40px;
  			line-height: 40px;
  			border-bottom: 1px solid #f3f3f3;
  		}
  		.collapse-item-content{
  			border-bottom: 1px solid #e6e6e6;
  			padding-top: 10px;
  			padding-bottom: 10px;
  		}
  	}
  }
</style>
